<template>
  <div class="header-two">
    <div class="header-hm">
      <el-row type="flex" justify="space-between">
        <el-page-header :content="$route.query.id?'编辑企业':'添加企业'" @back="fn" />
        <span style="float: right; padding: 3px 0" type="text">黑马管理员</span>
      </el-row>
    </div><br>
    <el-row type="flex" justify="center">
      <el-card class="box-card" style="width:1660px">
        <div slot="header" class="clearfix">
          <span>企业信息</span>
        </div>
        <div style="margin:20px 130px">
          <el-form ref="formRef" label-width="100px" :model="formData" :rules="rules">
            <el-row type="flex" justify="space-around">
              <el-form-item label="企业名称：" prop="name">
                <el-input v-model="formData.name" placeholder="请输入企业名称" style="width:538px" />
              </el-form-item>
              <el-form-item label="法人：" prop="legalPerson">
                <el-input v-model="formData.legalPerson" placeholder="请输入法人" style="width:538px" />
              </el-form-item>
            </el-row>
            <el-row type="flex" justify="space-around">
              <el-form-item label="注册地址：" prop="registeredAddress">
                <el-input v-model="formData.registeredAddress" placeholder="请输入注册地址" style="width:538px" />
              </el-form-item>
              <el-form-item label="所在行业：" prop="industryCode">
                <el-select v-model="formData.industryCode" placeholder="请输入所在行业" style="width:538px">
                  <el-option v-for="item in industry" :key="item.industryCode" :value="item.industryCode" :label="item.industryName" />
                </el-select>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="营业执照：" prop="fileList">
                <el-upload
                  ref="upload"
                  v-model="formData.fileList"
                  :on-change="handleFileChange"
                  class="upload-demo"
                  action=""
                  :before-upload="beforeAvatarUpload"
                  multiple
                  :http-request="imgUpload"
                  :limit="1"
                  :file-list="formData.fileList"
                >
                  <!--businessLicenseId有值时 说明上传成功 隐藏  -->
                  <el-button v-if="!businessLicenseId" size="small" type="text" @click="submitUpload">上传文件</el-button>
                  <el-button v-else size="small" type="success" plain disabled @click="submitUpload">上传成功</el-button>
                  <div slot="tip" class="el-upload__tip">支持拓展名：.png .jpg .jpeg,文件大小不得超过5M</div>
                </el-upload>
                <el-button class="el-icon-view" type="text" @click="visible=!visible" />
                <el-image
                  v-if="visible===true"
                  style="width: 100px; height: 100px"
                  :src="businessLicenseUrl"
                  :preview-src-list="srcList"
                />

              </el-form-item>
            </el-row>
          </el-form>
        </div>
      </el-card>
    </el-row>

    <el-row type="flex" justify="center" style="margin:20px 0 0 0">
      <el-card class="box-card" style="width:1660px">
        <div slot="header" class="clearfix">
          <span>联系人信息</span>
        </div>
        <div style="margin:20px 130px">
          <el-form ref="refForm" label-width="110px" :model="formData" :rules="rules">
            <el-row type="flex" justify="space-around">
              <el-form-item label="企业联系人：" prop="contact">
                <el-input v-model="formData.contact" placeholder="请输入企业联系人" style="width:520px" />
              </el-form-item>
              <el-form-item label="联系电话：" prop="contactNumber">
                <el-input v-model="formData.contactNumber" placeholder="请输入联系电话" style="width:520px" />
              </el-form-item>
            </el-row>

          </el-form>
        </div>
      </el-card>
    </el-row>
    <div class="footer">
      <el-row type="flex" justify="center">
        <el-button :disabled="!!$route.query.id" @click="onReset">重置</el-button>
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </el-row>
    </div>

  </div>
</template>

<script>
import { addEnterAPI, getDetailAPI, getRentAPI, getRentListAPI, updateRentAPI } from '@/api/enterprise'

export default {
  data() {
    return {
      srcList: [],
      visible: false,
      businessLicenseUrl: '', // 上传文件url
      businessLicenseId: null, // 上传文件id
      industry: [],
      formData: {
        fileList: [],
        name: '', // 企业名称
        legalPerson: '', // 企业法人
        registeredAddress: '', // 注册地址
        industryCode: null, // 行业编号
        contact: '', // 企业联系人
        contactNumber: ''// 企业联系方式
      },

      rules: {
        name: [
          { required: true, message: '必须填，内容不能为空', trigger: 'blur' }
        ],
        legalPerson: [
          { required: true, message: '必须填，内容不能为空', trigger: 'blur' }
        ],
        registeredAddress: [
          { required: true, message: '必须填，内容不能为空', trigger: 'blur' }
        ],
        industryCode: [
          { required: true, message: '必须填，内容不能为空', trigger: 'blur' }
        ],
        contact: [
          { required: true, message: '必须填，内容不能为空', trigger: 'blur' }
        ],
        contactNumber: [
          { required: true, message: '必须填，内容不能为空', trigger: 'blur' },
          {
            pattern: /^1[34578]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur'
          }
        ],
        fileList: [
          { required: true, message: '必须填，内容不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  async created() {
    const res = await getRentListAPI()
    this.industry = res.data
    this.onBackfill()
  },
  methods: {

    // 回填
    async onBackfill() {
      // 有id进行
      if (this.$route.query.id) {
        const { data } = await updateRentAPI(this.$route.query.id)
        console.log(data, '我是data')
        this.formData = {
          fileList: [{ file: data.businessLicenseUrl, type: 'businessLicense', name: data.businessLicenseName }],
          name: data.name,
          legalPerson: data.legalPerson,
          registeredAddress: data.registeredAddress,
          industryCode: data.industryCode,
          contact: data.contact,
          contactNumber: data.contactNumber
        }
        this.businessLicenseId = data.businessLicenseId
        this.businessLicenseUrl = data.businessLicenseUrl
        console.log(this.businessLicenseUrl)
        this.srcList.push(this.businessLicenseUrl)
        console.log(this.srcList, 1)
      }
    },
    // 重置
    onReset() {
      this.$refs.formRef.resetFields()
      this.$refs.refForm.resetFields()
      this.$refs.upload.clearFiles()
    },
    handleFileChange(file, fileList) {
      console.log(file, 1)
      console.log(fileList, 2)
      this.formData.fileList = fileList
    },
    submitUpload() {
      this.$refs.upload.submit()
    },
    async imgUpload(file) {
      const formDatas = new FormData()
      await formDatas.append('file', file.file)
      await formDatas.append('type', 'businessLicense')
      const res = await getRentAPI(formDatas)
      // 将拿到的值赋给url 和 id
      this.businessLicenseUrl = res.data.url
      this.businessLicenseId = res.data.id
      this.$message.success('图片导入成功')
    },
    // 上传文件之前校验
    beforeAvatarUpload(file) {
      const isJPG = ['image/jpeg', 'image/png', 'image/jpg'].includes(file.type)
      const isLt2M = file.size / 1024 / 1024 < 5

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 png 、jpg 、jpeg 格式!')
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 5MB!')
        return false
      }
      return isJPG && isLt2M
    },

    async onSubmit() {
      await this.$refs.formRef.validate()
      await this.$refs.refForm.validate()
      if (this.$route.query.mode === 'add') {
        // 添加
        await addEnterAPI({
          businessLicenseUrl: this.businessLicenseUrl,
          businessLicenseId: this.businessLicenseId,
          name: this.formData.name,
          legalPerson: this.formData.legalPerson,
          registeredAddress: this.formData.registeredAddress,
          industryCode: this.formData.industryCode,
          contact: this.formData.contact,
          contactNumber: this.formData.contactNumber
        })
        this.$message.success('添加企业成功')// 提示用户
      } else {
        await getDetailAPI({
          businessLicenseUrl: this.businessLicenseUrl,
          businessLicenseId: this.businessLicenseId,
          name: this.formData.name,
          legalPerson: this.formData.legalPerson,
          registeredAddress: this.formData.registeredAddress,
          industryCode: this.formData.industryCode,
          contact: this.formData.contact,
          contactNumber: this.formData.contactNumber,
          id: this.$route.query.id
        })
        this.$message.success('编辑成功')
      }
      window.history.go(-1)// 返回上一页
      this.$refs.upload.clearFiles()// 清空文件上传的列表
    },

    // 返回上一页
    fn() {
      window.history.go(-1)
    }

  }
}
</script>

  <style scoped>
    .header-hm{
      height: 64px;
      padding: 20px 10px;
      background-color: #fff;
    }
  .footer{
  background-color: #fff;
    position: fixed; /* 或者使用 absolute，取决于你的需求 */
    bottom: 0;
    left: 50%;
    transform: translateX(-50%); /* 水平居中 */
    width: 100%; /* 占据整个页面宽度 */
    height: 80px; /* 或者你想要的任何高度 */
    padding:20px 0;
    z-index: 9999; /* 确保元素显示在其他内容之上 */
  }
  .header-two{
        min-height: 100vh; /* 视口高度 */
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    background-color:#f4f6f8 ;
  }

  </style>
